<script setup lang="ts" name="NodeProperty">
import { Panel, type Node } from '@vue-flow/core';
import { type PropType } from 'vue';

const props = defineProps({
  node: {
    type: Object as PropType<Node>,
    default: () => ({
    })
  }
})

</script>

<template>
  <Panel position="top-right">
    <Transition name="fade">
      <div class="property-panel">

        <div class="property-header">
          <!-- 图标 -->
          <component :is="node.data.icon" class="icon-header" />
          <!-- 标题 -->
          <span class="property-title">{{ node.data.typeName }}</span>
        </div>

        <component :is="node.data.propertyComponent" :node="node" />

      </div>

    </Transition>
  </Panel>
</template>

<style scoped>
.property-panel {
  width: 40%;
  min-width: 340px;
  top: 0px;
  padding: 10px;
  min-height: 600px;
  height: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  position: relative;
  z-index: 5;
  overflow-y: visible;
}

.property-header {
  display: flex;
  align-items: center;
  font-size: 12px;
  justify-content: space-between;
  color: rgb(26, 25, 25);
  padding: 0px 0px 5px 0px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom: 1px solid rgb(202, 202, 202);
}

.icon-header {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  vertical-align: middle;
  color: #409EFF;
  /* Element Plus 主色调 */
}

.property-title {
  flex-grow: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
  /* 可选：配合透明度变化 */
}
</style>
